<template>
  <view class="page">
    <view class="filter">
      <picker :range="typeOptions" @change="onTypeChange">
        <view class="picker">{{ typeLabel }}</view>
      </picker>
      <picker :range="statusOptions" @change="onStatusChange">
        <view class="picker">{{ statusLabel }}</view>
      </picker>
    </view>

    <view v-if="loading" class="loading">加载中...</view>
    <view v-else-if="error" class="error">{{ error }}</view>
    <view v-else>
      <view v-if="!list.length" class="empty">暂无公告</view>
      <view class="cards">
        <view class="card" v-for="item in list" :key="item.id" @tap="goDetail(item)">
          <view class="row">
            <text class="tag" :class="item.type">{{ mapType(item.type) }}</text>
            <text class="title">{{ item.title }}</text>
          </view>
          <text class="sub">发布时间：{{ fmt(item.publish_time || item.publishTime) }}</text>
          <view class="row2">
            <text class="badge" :class="item.status">{{ mapStatus(item.status) }}</text>
            <text class="meta">浏览 {{ item.view_count || item.viewCount || 0 }}</text>
          </view>
        </view>
      </view>
    </view>

    <custom-tabbar :active="0" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { listAnnouncements } from '@/api/announcement'
export default {
  components: { CustomTabbar },
  data(){
    return {
      loading: false,
      error: '',
      list: [],
      type: '',
      status: 'PUBLISHED',
      typeOptions: ['全部类型','SYSTEM','ACTIVITY','SAFETY','UPDATE'],
      statusOptions: ['全部状态','PUBLISHED','DRAFT','OFFLINE']
    }
  },
  computed: {
    typeLabel(){ return this.type || '全部类型' },
    statusLabel(){ return this.status || '全部状态' }
  },
  onShow(){ this.fetch() },
  methods: {
    async fetch(){
      this.loading = true
      this.error = ''
      try{
        const params = {}
        if (this.type) params.type = this.type
        if (this.status) params.status = this.status
        const res = await listAnnouncements(params)
        const data = Array.isArray(res.data) ? res.data : (res.rows || res.list || [])
        this.list = (data||[]).map(it=>({
          id: it.id,
          title: it.title,
          type: it.type,
          status: it.status,
          publish_time: it.publish_time || it.publishTime,
          view_count: it.view_count || it.viewCount
        }))
      }catch(e){
        this.error = '加载失败，请稍后重试'
      }finally{ this.loading=false }
    },
    onTypeChange(e){
      const idx = Number(e.detail.value)
      const map = ['', 'SYSTEM','ACTIVITY','SAFETY','UPDATE']
      this.type = map[idx] || ''
      this.fetch()
    },
    onStatusChange(e){
      const idx = Number(e.detail.value)
      const map = ['', 'PUBLISHED','DRAFT','OFFLINE']
      this.status = map[idx] || ''
      this.fetch()
    },
    fmt(val){ if(!val) return ''; const d = new Date(String(val).replace(/-/g,'/')); if(isNaN(d.getTime())) return String(val); const p=n=>n<10?('0'+n):n; return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}` },
    mapType(t){ const m={SYSTEM:'系统',ACTIVITY:'活动',SAFETY:'安全',UPDATE:'更新'}; return m[t]||t||'其它' },
    mapStatus(s){ const m={DRAFT:'草稿',PUBLISHED:'已发布',OFFLINE:'已下线'}; return m[s]||s },
    goDetail(item){ if(!item||!item.id) return; uni.navigateTo({ url: `/pages/announcement/detail?id=${item.id}` }) }
  }
}
</script>

<style scoped>
.page { padding: 12rpx 12rpx 120rpx 12rpx; }
.filter { display:flex; gap: 12rpx; margin: 8rpx 0 12rpx; }
.picker { background:#f3f4f6; padding: 10rpx 16rpx; border-radius: 999rpx; color:#374151; }
.loading,.error,.empty { padding: 24rpx; color:#6b7280; }
.cards { display:flex; flex-direction: column; gap: 12rpx; }
.card { background:#fff; border-radius: 12rpx; padding: 16rpx; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.04); }
.row { display:flex; align-items:center; gap: 10rpx; }
.tag { background:#ecfeff; color:#0ea5a5; font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 999rpx; }
.title { font-weight: 700; font-size: 28rpx; color:#111827; }
.sub { display:block; margin-top: 8rpx; color:#6b7280; font-size: 22rpx; }
.row2 { margin-top: 10rpx; display:flex; align-items:center; justify-content: space-between; }
.badge { background:#f3f4f6; color:#374151; font-size: 20rpx; padding: 4rpx 10rpx; border-radius: 8rpx; }
.meta { color:#9ca3af; font-size: 20rpx; }
</style>


